import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { Layout, Menu, Icon, Dropdown, Avatar, Badge } from 'antd';
import { getNotificationsList } from '../../actions/notification';
import { logout } from '../../actions/user';
import Logo from './logo.png';
import './frame.less';
//react中文件图片也是需要引入的
// const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

const mapState = state => {
  return {
    notificationCount: state.Notifications.list.filter(item => !item.hasRead)
      .length,
    avatar: state.User.avatar,
    playName: state.User.playName
  };
};
@withRouter
@connect(mapState, { getNotificationsList, logout })
// 在外面包了一层withRouter，就可以用props获取到路由的一些参数
class Frame extends Component {
  componentDidMount() {
    this.props.getNotificationsList();
  }
  onMEnuClick = ({ key }) => {
    this.props.history.push(key);
  };
  onDropdownMenuClick = ({ key }) => {
    //参数书解构的对象
    console.log(key);
    if (key === '/logout') {
      this.props.logout();
    } else {
      this.props.history.push(key);
    }
  };
  renderDropmenu = () => (
    <Menu onClick={this.onDropdownMenuClick}>
      <Menu.Item key="/admin/notifications">
        <Badge count={this.props.notificationCount} offset={[10, -5]}>
          通知中心
        </Badge>
      </Menu.Item>
      <Menu.Item key="/admin/profile">个人设置</Menu.Item>
      <Menu.Item key="/logout">退出登录</Menu.Item>
    </Menu>
  );
  render() {
    //使用badge的时候，dot和count给的位置应该相反

    //对应侧边栏高亮部分
    const selectKey = this.props.location.pathname.split('/');
    selectKey.length = 3;
    return (
      <Layout style={{ minHeight: '100%' }}>
        <Header className="header j-header">
          <div className="j-logo">
            <img src={Logo} alt="自在admim" />
          </div>
          <Dropdown overlay={this.renderDropmenu()} trigger={['click']}>
            <a className="ant-dropdown-link" href="#" className="dropdown">
              <Avatar src={this.props.avatar} />
              <Badge dot={this.props.notificationCount > 0}>
                <span style={{ marginRight: '5px' }}>
                  {this.props.playName}
                </span>
              </Badge>
              <Icon type="down" />
            </a>
          </Dropdown>
        </Header>
        <Layout>
          <Sider width={200} style={{ background: '#fff' }}>
            <Menu
              mode="inline"
              onClick={this.onMEnuClick}
              selectedKeys={selectKey.join('/')}
              defaultSelectedKeys={[this.props.menus[0].pathname]}
              defaultOpenKeys={['sub1']}
              style={{ height: '100%', borderRight: 0 }}
            >
              {/* SubMenu：二级菜单（如果没有二级菜单就只是用Menu.Item） */}
              {this.props.menus.map(route => {
                return (
                  <Menu.Item key={route.pathname}>
                    <Icon type={route.icon} />
                    <span>{route.title}</span>
                  </Menu.Item>
                );
              })}
            </Menu>
          </Sider>
          <Layout style={{ padding: '15px' }}>
            {/* <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>Home</Breadcrumb.Item>
              <Breadcrumb.Item>List</Breadcrumb.Item>
              <Breadcrumb.Item>App</Breadcrumb.Item>
            </Breadcrumb> */}
            <Content
              style={{
                background: '#fff',
                margin: 0,
                minHeight: 280
              }}
            >
              {this.props.children}
            </Content>
          </Layout>
        </Layout>
      </Layout>
    );
  }
}
export default Frame;
